<template>
	<div class="aPicture">
		<aPicture-info ref="aPicture-info"></aPicture-info>
		<header class="aPicture-head" :class="domain2 === 'https://218.13.22.89' || domain2 === 'https://hezhangzhi.gd-gy.com.cn' ? 'city' : 'gy'" @click="back"></header>
	</div>
</template>

<script>
  import aPictureInfo from './a-picture-info.vue'
  import storage from 'good-storage'
  import {domain2} from 'global/setting'

export default {
		components: {
			'aPicture-info': aPictureInfo
		},
		data () {
			return {
        layerActive: 'normal',
        domain2: domain2
			}
		},
		methods: {
			layerClick (name) {
				if (name === this.layerActive) {
					return
			}
				let obj = {}
			switch (name) {
					case 'normal':
						obj = {
							base: true,
							height: false,
							panorama: false
						}
						break
				case 'earth':
						obj = {
							base: false,
							height: true,
							panorama: false
						}
						break
				case 'panorama':
						obj = {
							base: false,
							height: false,
							panorama: true
						}
						break
			}
				this.$refs['aPicture-info'].layerChange(obj)
			this.layerActive = name
		},
			back () {
				let type = storage.session.get('type')
				if (type == '0' || type == '1' || type == '2') {
					this.$router.push('/home/work')
				} else if (type === '4' || type === '7' || type === '8') {
					this.$router.push('/home/work1')
				} else if (type == '3' || type === '6') {
					this.$router.push('/chose')
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '~common/scss/color';

	.aPicture {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		.aPicture-head {
			width: 260px;
    	height: 66px;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 100;
			cursor: pointer;
		}
    .city {
      background-image: url(./img/aPictureHeaderBg.png);
			background-size: 100% 100%;
    }
    .gy {
      background-image: url(./img/apicture.png);
			background-size: 100% 100%;
    }
		.aPicture-layers {
			width: 118px;
			height: 66px;
			background-color: rgba(55, 55, 55, .1);
			transition: all .4s;
			z-index: 10;
			position: absolute;
			right: 10px;
			bottom: 10px;
			padding: 8px;
			user-select: none;
			.aPicture-layer {
				width: 80px;
				height: 50px;
				transition: all .4s;
				border: 1px solid white;
				background-size: 100% 100%;
				position: absolute;
				cursor: pointer;
				span {
					position: absolute;
					bottom: 0;
					right: 0;
					color: white;
					font-size: 12px;
					transition: all .4s;
				}
			}
			.aPicture-layer:hover {
				transform: scale(1.2);
			}
			.aPicture-layer:hover, .aPicture-layer-active {
				border: 1px solid $color-default;
				span {
					background-color: $color-default;
				}
			}
			.aPicture-layer:nth-of-type(1) {
				right: 28px;
				background-image: url(./img/maptypeNormal.png);
			}
			.aPicture-layer:nth-of-type(2) {
				right: 18px;
				background-image: url(./img/maptypeEarth.png);
			}
			.aPicture-layer:nth-of-type(3) {
				right: 8px;
				background-image: url(./img/maptypePanorama.png);
			}
		}
		.aPicture-layers:hover {
			width: 278px;
			.aPicture-layer:nth-of-type(1) {
				right: 188px;
			}
			.aPicture-layer:nth-of-type(2) {
				right: 98px;
			}
		}
	}
</style>
